<template>
  <div class="page__header">
    <el-form ref="queryForm" class="query-form" :model="queryParams" inline>
      <el-form-item label="项目" prop="app_id">
        <el-select size="small" style="width: 150px;" v-model="queryParams.app_id" @change="proChange">
          <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <version-select ref="versionSelect" :selOptions="versionOpts" isIntVer v-model="queryParams.version" @change="searchChange"></version-select>
      </el-form-item>
      <el-form-item label="渠道" prop="union_id">
        <select-check-box  @change="searchChange" v-model="queryParams.union_id" :selOptions="channelOpts" :props="{value:'channel_id',label:'name'}" doubleColumn checkAllLabel="全部渠道" filterable >
        </select-check-box>
      </el-form-item>
      <el-form-item label="日期" prop="time">
        <el-date-picker
          style="width: 150px;"
           value-format="yyyy-MM-dd"
           type="date"
           placeholder="选择日期"
           v-model="queryParams.time"
           :picker-options="{ disabledDate }"
            @change="searchChange">
          </el-date-picker>
        <!-- <indic-cascader v-model="queryParams.indicator" :options="indicatorOpts" :defIndic="defIndicator" @change="indicatorChange" /> -->
      </el-form-item>
      <el-form-item label="列表模式" prop="mode">
        <el-select v-model="queryParams.mode" @change="modeChange">
          <el-option v-for="item in LIST_MODE" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
        <!-- <select-check-box v-model="queryParams.attr_id" :selOptions="packageOpts" checkAllLabel="全部业务"/> -->
      </el-form-item>
      <el-form-item label="事件ID或者名称">
        <!-- <el-input v-model="queryParams.button_id" type="text" placeholder="全部事件" style="width: 120px;"></el-input> -->
         <el-select :multiple="true" style="width: 144px;" :collapse-tags="true" v-model="queryParams.button_id" filterable clearable placeholder="全部事件"  @change="() => searchChange(false)">
          <el-option v-for="item in eventList" :key="item.button_id" :label="`${item.button_id} - ${item.button_name}`" :value="item.button_id"></el-option>
         </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          @click="searchChange">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning"
          size="small"
          :loading="showManagerLoading"
          @click="toManager">埋点管理</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getVersionTree } from '@/api'
import { getChannelByAppId } from '@/api/system/channel'
import { parseTime } from '@/utils/index'

const LIST_MODE = [
  { label: '树形无序', value: 1 },
  { label: '线型升序', value: 0 }
]
export default {
  props: {
    showManagerLoading: { type: Boolean, default: false },
    eventList: { type: Array, default: () => [] }
  },
  data: () => {
    return {
      LIST_MODE,
      versionOpts: [],
      channelOpts: [],
      channelList: [],
      queryParams: {
        app_id: '',
        time: parseTime(Date.now() - 3600 * 24 * 1000, '{y}-{m}-{d}'),
        union_id: [],
        version: [],
        mode: LIST_MODE[0].value,
        button_id: []
      }
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  methods: {
    disabledDate (time) {
      const now = new Date()
      now.setHours(0, 0, 0, 0)
      return time.getTime() >= now.getTime()
    },
    getVerLists (app_id) {
      getVersionTree({ app_id, is_test: false })
        .then(res => {
          let list = res.data || []
          this.versionOpts = list
          this.$emit('version-change', this.versionOpts)
          this.$emit('channel-change', this.channelOpts)
          this.searchChange()
        })
    },
    getChannels () {
      const list = this.permission_projectList.map(item => item.app_id)
      return getChannelByAppId({
        app_ids: list.join()
      }).then(res => {
        this.channelList = res.data.list.map(item => {
          item.name = `${item.name}(${item.channel_id})`
          return item
        })
        this.channelOpts = this.channelList.filter(item1 => item1.app_id === this.queryParams.app_id)
      })
    },
    proChange (val) {
      this.channelOpts = this.channelList.filter(item1 => item1.app_id === this.queryParams.app_id)
      this.getVerLists(val)
      this.queryParams.union_id = []
      this.queryParams.attr_id = []
      this.queryParams.version = []
      this.queryParams.button_id = []
    },
    modeChange () {
      this.searchChange()
    },
    parseQueryparams () {
      const params = {
        appid: this.queryParams.app_id,
        version: this.queryParams.version.join(','),
        unionid: this.queryParams.union_id.join(','),
        date: this.queryParams.time,
        mode: this.queryParams.mode

      }
      if (this.queryParams.button_id?.length) {
        params.button_id = this.queryParams.button_id.join(',')
      }
      return params
    },
    searchChange (updateEventOptions = true) {
      // debugger
      this.$emit('change', { ...this.parseQueryparams(), updateEventOptions })
    },
    toManager () {
      // this.$emit('to-manager')
      this.$router.push({
        path: `/feature/report-manager`,
        query: { app_id: this.queryParams.app_id }
      })
    }
  },
  mounted () {
    const defaultApp = this.permission_projectList[0]
    this.queryParams.app_id = defaultApp.app_id
    // this.queryParams.app_id = 147
    // this.getVerLists(defaultApp.app_id)
    this.proChange(defaultApp.app_id)
    this.getChannels()
    this.searchChange()
  }
}
</script>

<style lang="scss" scoped>
.page__header {
  /deep/ .el-tag--info {
    display: flex;
    align-items: center;

  }
  // /deep/ .el-select__tags {
  //   white-space: nowrap;;
  // }
  // /deep/ .el-select__tags span {
  //   display: flex;
  //   align-items: center;
  // }
  /deep/ .el-select__tags-text {
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

}
</style>
